<template>
  <div class="home">
    <van-search v-model="value" placeholder="请输入商家" />
    <header>
      <van-grid :column-num="5">
        <van-grid-item
          v-for="(item,index) in title"
          :key="index"
          :icon="item.icon"
          :text="item.name"
          v-show="item.cateId>10"
        />
      </van-grid>
    </header>
    <p>————附近商家————</p>
    <ul>
      <li>综合排序</li>
      <li>销量最高</li>
      <li>离我最近</li>
      <li>筛选</li>
    </ul>
    <section>
      <div class="main" v-for="(item, index) in list" :key="index" @click="gotoEatList(item)">
        <img :src="item.picUrl" alt />
        <div class="con">
          
          <span class="p1">{{item.shopName}}</span>
          <br />
          <br />
          <span class="p2">{{item.monthSalesTip}}</span>
          <br />
          <br />
          <span>{{item.minPriceTip}}</span>&nbsp;&nbsp;&nbsp;
          <span>{{item.shippingFeeTip}}</span>
        </div>
      </div>
    </section>
    <footer>
       <ol>
        <li>
          <template>
            <van-icon name="wap-home-o" size="26px"/>
          </template><br>
          <span>首页</span>
        </li>
        <li>
          <template>
            <van-icon name="notes-o" size="26px"/>
          </template><br>
          <span>账单</span>
        </li>
        <li>
          <template>
            <van-icon name="contact" size="26px"/>
          </template><br>
          <span>我的</span>
        </li>
      </ol>
    </footer>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      value: "",
      value: "",
      title: [],
      list: [],
    };
  },
  mounted() {
    axios.get("http://localhost:8080/category.json").then((res) => {
      // console.log(res.data.data.kingkongList);
      this.title = res.data.data.kingkongList;
    });
    axios.get("http://localhost:8080/listData.json").then((res) => {
      // console.log(res.data.data.shopList);
      this.list = res.data.data.shopList;
    });
  },
  methods: {
    gotoEatList(item) {
      // console.log(item);
      this.$router.push({path:"/EatList", query:{id:item.mtWmPoiId}});
    },
  },
};
</script>
<style scoped>
.van-search {
  background: #000;
}
header {
  width: 100%;
  height: 28vh;
  /* border: 1px solid #000; */
  display: flex;
  justify-content: space-around;
  flex-flow: wrap row;
}
.header_box {
  width: 17%;
  height: 10vh;
  /* border: 1px solid #000; */
}
.header_box img {
  width: 70%;
  height: 6vh;
  margin-left: 15%;
}
p {
  text-align: center;
}
ul {
  display: flex;
  justify-content: space-around;
  border-top: 1px solid rgba(128, 128, 128, 0.274);
  border-bottom: 1px solid rgba(128, 128, 128, 0.274);
}
ul li {
  /* width: 25%; */
  color: grey;
  height: 5vh;
  line-height: 5vh;
}
.main {
  width: 100%;
  height: 20vh;
  border: 1px solid rgba(0, 0, 0, 0.123);
  display: flex;
  /* justify-content: space-around; */
  align-items: center;
}
.main img {
  width: 30%;
  height: 17vh;
}
.con {
  height: 17vh;
}
ol {
  width: 100%;
  height: 9vh;
  /* border: 1px solid #000; */
  display: flex;
  align-items: center;
  justify-content: space-around;
}
ol li {
  list-style: none;
  width: 20%;
  height: 9vh;
  /* line-height: 9vh; */
  /* border: 1px solid #000; */
  text-align: center;
  /* display: flex;
  flex-wrap: wrap; */
}
section {
  overflow: scroll;
  width: 100%;
  height: 40vh;
  border: 1px solid rgba(0, 0, 0, 0.068);
}
</style>